<template>
  <div>
     <div v-if="!repoUrl">loading</div>
    <div v-else>most star repo is <a :href="repoUrl">{{repoName}}</a></div>
  </div>
  <!--
  {
  "total_count": 394698,
  "incomplete_results": false,
  "items": [
    {
      "id": 11730342,
      "node_id": "MDEwOlJlcG9zaXRvcnkxMTczMDM0Mg==",
      "name": "vue",
      "full_name": "vuejs/vue",
      "private": false,
      "owner": {
        "login": "vuejs",
        "id": 6128107,
        "node_id": "MDEyOk9yZ2FuaXphdGlvbjYxMjgxMDc=",
        "avatar_url": "https://avatars1.githubusercontent.com/u/6128107?v=4",
        "gravatar_id": "",
        "url": "https://api.github.com/users/vuejs",
        "html_url": "https://github.com/vuejs",
        "followers_url": "https://api.github.com/users/vuejs/followers",
        "following_url": "https://api.github.com/users/vuejs/following{/other_user}",
        "gists_url": "https://api.github.com/users/vuejs/gists{/gist_id}",
        "starred_url": "https://api.github.com/users/vuejs/starred{/owner}{/repo}",
        "subscriptions_url": "https://api.github.com/users/vuejs/subscriptions",
        "organizations_url": "https://api.github.com/users/vuejs/orgs",
        "repos_url": "https://api.github.com/users/vuejs/repos",
        "events_url": "https://api.github.com/users/vuejs/events{/privacy}",
        "received_events_url": "https://api.github.com/users/vuejs/received_events",
        "type": "Organization",
        "site_admin": false
      },
      "html_url": "https://github.com/vuejs/vue",
      "description": "🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.",
      "fork": false,
      "url": "https://api.github.com/repos/vuejs/vue",
      "forks_url": "https://api.github.com/repos/vuejs/vue/forks",
      "keys_url": "https://api.github.com/repos/vuejs/vue/keys{/key_id}",
      "collaborators_url": "https://api.github.com/repos/vuejs/vue/collaborators{/collaborator}",
      "teams_url": "https://api.github.com/repos/vuejs/vue/teams",
      "hooks_url": "https://api.github.com/repos/vuejs/vue/hooks",
      "issue_events_url": "https://api.github.com/repos/vuejs/vue/issues/events{/number}",
      "events_url": "https://api.github.com/repos/vuejs/vue/events",
      "assignees_url": "https://api.github.com/repos/vuejs/vue/assignees{/user}",
      "branches_url": "https://api.github.com/repos/vuejs/vue/branches{/branch}",
      "tags_url": "https://api.github.com/repos/vuejs/vue/tags",
      "blobs_url": "https://api.github.com/repos/vuejs/vue/git/blobs{/sha}",
      "git_tags_url": "https://api.github.com/repos/vuejs/vue/git/tags{/sha}",
      "git_refs_url": "https://api.github.com/repos/vuejs/vue/git/refs{/sha}",
      "trees_url": "https://api.github.com/repos/vuejs/vue/git/trees{/sha}",
      "statuses_url": "https://api.github.com/repos/vuejs/vue/statuses/{sha}",
      "languages_url": "https://api.github.com/repos/vuejs/vue/languages",
      "stargazers_url": "https://api.github.com/repos/vuejs/vue/stargazers",
      "contributors_url": "https://api.github.com/repos/vuejs/vue/contributors",
      "subscribers_url": "https://api.github.com/repos/vuejs/vue/subscribers",
      "subscription_url": "https://api.github.com/repos/vuejs/vue/subscription",
      "commits_url": "https://api.github.com/repos/vuejs/vue/commits{/sha}",
      "git_commits_url": "https://api.github.com/repos/vuejs/vue/git/commits{/sha}",
      "comments_url": "https://api.github.com/repos/vuejs/vue/comments{/number}",
      "issue_comment_url": "https://api.github.com/repos/vuejs/vue/issues/comments{/number}",
      "contents_url": "https://api.github.com/repos/vuejs/vue/contents/{+path}",
      "compare_url": "https://api.github.com/repos/vuejs/vue/compare/{base}...{head}",
      "merges_url": "https://api.github.com/repos/vuejs/vue/merges",
      "archive_url": "https://api.github.com/repos/vuejs/vue/{archive_format}{/ref}",
      "downloads_url": "https://api.github.com/repos/vuejs/vue/downloads",
      "issues_url": "https://api.github.com/repos/vuejs/vue/issues{/number}",
      "pulls_url": "https://api.github.com/repos/vuejs/vue/pulls{/number}",
      "milestones_url": "https://api.github.com/repos/vuejs/vue/milestones{/number}",
      "notifications_url": "https://api.github.com/repos/vuejs/vue/notifications{?since,all,participating}",
      "labels_url": "https://api.github.com/repos/vuejs/vue/labels{/name}",
      "releases_url": "https://api.github.com/repos/vuejs/vue/releases{/id}",
      "deployments_url": "https://api.github.com/repos/vuejs/vue/deployments",
      "created_at": "2013-07-29T03:24:51Z",
      "updated_at": "2020-05-13T03:48:05Z",
      "pushed_at": "2020-05-12T17:20:31Z",
      "git_url": "git://github.com/vuejs/vue.git",
      "ssh_url": "git@github.com:vuejs/vue.git",
      "clone_url": "https://github.com/vuejs/vue.git",
      "svn_url": "https://github.com/vuejs/vue",
      "homepage": "http://vuejs.org",
      "size": 27292,
      "stargazers_count": 163818,
      "watchers_count": 163818,
      "language": "JavaScript",
      "has_issues": true,
      "has_projects": true,
      "has_downloads": true,
      "has_wiki": true,
      "has_pages": false,
      "forks_count": 24804,
      "mirror_url": null,
      "archived": false,
      "disabled": false,
      "open_issues_count": 499,
      "license": {
        "key": "mit",
        "name": "MIT License",
        "spdx_id": "MIT",
        "url": "https://api.github.com/licenses/mit",
        "node_id": "MDc6TGljZW5zZTEz"
      },
      "forks": 24804,
      "open_issues": 499,
      "watchers": 163818,
      "default_branch": "dev",
      "score": 1.0
    },
  -->
</template>

<script>
  import axios from 'axios'
  export default {
     data(){
       return{
         repoUrl:'',
         repoName:''
       }
     },
    mounted(){
       //发送ajax请求获取数据
      const url =`https://api.github.com/search/repositories?q=vu&sort=stars`
      // this.$http.get(url).then(
      //   //成功了
      //   response=>{
      //    const result = response.data
      //     console.log(result.items[0])
      //     //得到最受欢迎的仓库地址
      //     const mostRepo = result.items[0]
      //     this.repoUrl  = mostRepo.html_url
      //     this.repoName = mostRepo.name
      //   },
      //   reponse=>{
      //     alert('请求失败')
      //   }
      // )
      axios.get(url).then(response=>{
        const result = response.data
        console.log(result.items[0])
        //得到最受欢迎的仓库地址
        const mostRepo = result.items[0]
        this.repoUrl  = mostRepo.html_url
        this.repoName = mostRepo.name
      }).catch(error=>{
        alert('请求失败')
      })
    }
  }
</script>

<style>

</style>
